import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, ImageBackground, Image, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux'
import images from '../../images';
import { AppStyles, Colors } from '../../style';

var screenWidth = require('Dimensions').get('window').width;
var screenHeight = require('Dimensions').get('window').height;

@connect()
export default class Login extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.background}>
                    <View style={{ marginLeft: 30, marginTop: 50, flexDirection: 'row' }}>
                        <Image source={images.image2} style={styles.icon} />
                        <View style={{ marginLeft: 5, flex: 1, justifyContent: 'center' }}>
                            <Text style={AppStyles.bigWhiteTextStyle}>用户名</Text>
                            <Text style={AppStyles.mediumWhiteTextStyle}>会员</Text>
                        </View>
                    </View>
                    <Text style={[AppStyles.smallWhiteTextStyle, { marginLeft: 30, marginTop: 5 }]}>简介</Text>
                </View>
                <Item title={'我的信息'} />
                <Item title={'我的课程'} />
                <Item title={'设置'} />
            </View>
        )
    }
}

/**
 * title
 * onClick
 */
class Item extends Component {
    render() {
        return (
            <TouchableOpacity onPress={() => {
                this.props.onClick && this.props.onClick()
            }}>
                <View style={{ width: screenWidth, height: 40, alignItems: 'center', flexDirection: 'row', backgroundColor: Colors.white }}>
                    <Text style={[AppStyles.mediumTextStyle, { marginLeft: 10 }]}>{this.props.title || '我的信息'}</Text>
                    <Image source={images.right} style={{ width: 25, height: 25, position: 'absolute', right: 10, top: 7.5 }} />
                </View>
                <View style={{ height: 5, width: screenWidth, backgroundColor: Colors.grey }} />
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.grey
    },
    background: {
        width: screenWidth,
        height: 200,
        backgroundColor: Colors.black
    },
    icon: {
        width: 90,
        height: 90
    }
})